<template>
  <div class="wrap">
    <template>
      <el-tabs v-model="params.curTab" @tab-click="setCurTab">
        <el-tab-pane name="TabPlane" :label="$t('message.FastCutCmd.planeCut')">
          <query-list
                      :tipMsg="$t('message.FastCutCmd.line')"
                      v-model="params.lineList"
                      @removeItem="removeSelect"
                      :active="params.queryListActiveMap.lineList"
                      @switchQuery="switchQuery('lineList')"/>
          <div class="d-flex align-items-center">
            <el-checkbox v-model="params.tangentPropagation" :label="$t('message.FastCutCmd.tangentExtend')" @change="changeCommon"/>
          </div>
          <div class="d-flex align-items-center">
            <label class="el-form-item__label">{{$t('message.FastCutCmd.distance')}}：</label>
            <base-input-number v-model="params.distance.variableValue"
                               :min="0.1"
                               @focus="focus('distance')"
                               @change="changeCommon('distance')"/>
            <label class="label">mm</label>
          </div>
          <div class="d-flex align-items-center">
            <label class="el-form-item__label">{{$t('message.FastCutCmd.angle')}}：</label>
            <base-input-number v-model="params.angle.variableValue"
                               :min="0.1"
                               :max="90"
                               @focus="focus('angle')"
                               @change="changeCommon('angle')"/>
            <label class="label">°</label>
          </div>
          <div class="d-flex align-items-center">
            <el-checkbox v-model="params.reverseDirection" :label="$t('message.FastCutCmd.reverseDir')" @change="changeCommon('reverseDir')"/>
          </div>
        </el-tab-pane>
        <el-tab-pane name="TabPipe" :label="$t('message.FastCutCmd.pipeCut')">
          <query-list
                      :tipMsg="$t('message.FastCutCmd.line')"
                      v-model="params.cutPath"
                      @removeItem="removeSelect"
                      :active="params.queryListActiveMap.cutPath"
                      @switchQuery="switchQuery('cutPath')">
          </query-list>
          <query-list :tipMsg="$t('message.FastCutCmd.cutSolid')"
                      v-model="params.cutSolidRef"
                      @removeItem="removeSelect"
                      :active="params.queryListActiveMap.cutSolidRef"
                      @switchQuery="switchQuery('cutSolidRef')">>
          </query-list>
          <div class="d-flex align-items-center">
            <label class="el-form-item__label">{{$t('message.FastCutCmd.radius')}}：</label>
            <base-input-number v-model="params.radius.variableValue"
                               :min="0.1"
                               @focus="focus('radius')"
                               @change="changeCommon('radius')"/>
            <label class="label">mm</label>
          </div>
        </el-tab-pane>
      </el-tabs>
    </template>
    <div class="btn">
      <el-button
        type="primary"
        size="small"
        :disabled="isDisabled()"
        @click="confirm"
      >
        {{ $t('message.HoleCmd.confirm') }}
      </el-button>
      <el-button
        size="small"
        @click="close"
      >
        {{ $t('message.HoleCmd.close') }}
      </el-button>
    </div>
  </div>
</template>

<script>
import DialogMixin from "../DialogMixin";
import {holeAndCutCommand} from "../../../Command/HoleAndCutCommand";
import {ElementType, EntityType} from "../../../modeling/TypeDefine";

export default  {
  mixins: [DialogMixin],
  name: "CmdFastCut",
  data() {
    return {
      tabOptions: ["TabPlane", "TabPipe"],
      params: {
        curTab: "TabPlane",
        lineList: [],
        tangentPropagation: true,
        distance:{
          variableValue:2,
          variableName:null
        },
        angle: {
          variableValue:45,
          variableName:null
        },
        reverseDirection: false,
        cutPath: [],
        cutSolidRef: [],
        radius: {
          variableValue:2,
          variableName:null
        },
        queryListActiveMap: {
          lineList: 1,
          cutSolidRef: 0,
          cutPath: 0
        },
        filterTypes: [ElementType.EDGE],
      },
      circularProfileTipMsg: this.$t('message.FastCutCmd.selPath'),
      originValue: 1,
    }
  },

  methods: {
    isDisabled() {
      if ((this.params.curTab === this.tabOptions[0] && this.params.lineList.length <= 0) ||
              (this.params.curTab === this.tabOptions[1] && (this.params.cutPath.length <= 0 || this.params.cutSolidRef.length <= 0))) {
        return true;
      } else {
        return false;
      }
    },
    setCurTab(tab) {
      if (tab.index === "1"){
        //取消平面切削中拾取对象的高亮显示
        this.params.lineList?.forEach(lineEle => {
          this.removeSelect(lineEle);
        })
        this.params.curTab = this.tabOptions[1];
        this.switchQuery("cutPath");
      }else {
        //取消管状切削中拾取对象的高亮显示
        this.params.cutPath?.forEach(path => {
          this.removeSelect(path);
        })
        this.params.cutSolidRef?.forEach(solid => {
          this.removeSelect(solid);
        })
        this.params.curTab = this.tabOptions[0];
        this.switchQuery("lineList");
      }
      holeAndCutCommand.clearPreview();
      this.changeCommon();
    },
    init(){
      holeAndCutCommand.setDragSelectEnabled(false);
      // holeAndCutCommand.getInitCmdParams("initFastCut", paramData => {
      //   if (paramData) {
      //     //tab
      //     this.params.curTab = paramData.CutType === 0 ? this.tabOptions[0] : this.tabOptions[1];
      //     //平面切除
      //     if (paramData.CutType === 0) {
      //       this.params.lineList = [];
      //       for (let i = 0; i < paramData.Elements.length; i++) {
      //         let element = elementManager.getElement(paramData.Elements[i]);
      //         if (element.type === ElementType.EDGE) {
      //           let elementInfo = makeElementInfo(element);
      //           this.params.lineList.push(elementInfo);
      //         }
      //       }
      //       this.params.reverseDirection = paramData.Reverse === 1;
      //       const variableName = paramData.Angle.VariableName || null;
      //       this.params.angle = new InputVariable(paramData.Angle.VariableValue, variableName);
      //       const varName = paramData.Distance.VariableName || null;
      //       this.params.distance = new InputVariable(paramData.Distance.VariableValue, varName);
      //       this.params.tangentPropagation = paramData.TangentPropagation === 1;
      //     }else{//管状切除
      //       for (let item of paramData.SweepPath) {
      //         let element = elementManager.getElement(item);
      //         let elementInfo = makeElementInfo(element);
      //         this.params.cutPath.push(elementInfo);
      //       }
      //     }
      //   }
      // });
    },
    confirm(){
      let paramData = this.getCommandParams(false);
      if (paramData){
        holeAndCutCommand.executeFastCutCmd(paramData)
      }
    },
    close(){
      holeAndCutCommand.closeActiveCmd();
    },
    changePluginContainerHeight() {
      holeAndCutCommand.changePluginContainerHeight({minWidth: this.$el.clientWidth, maxHeight: this.$el.clientHeight})
    },
    removeSelect(item) {
      if (item) {
        holeAndCutCommand.clearHighLightElements([item.id]);
      }
    },
    switchQuery(name) {
      for (const key in this.params.queryListActiveMap) {
        this.params.queryListActiveMap[key] = key === name ? 1 : 0;
      }
      let isPickEntity = false;
      if (name === "lineList" || name === "cutPath") {
        this.params.filterTypes = [ElementType.EDGE];
        holeAndCutCommand.setSelectType(this.params.filterTypes);
      } else if (name === "cutSolidRef") {
        // this.params.filterTypes = [EntityType.SOLID];
        holeAndCutCommand.resetSelectType();
        isPickEntity = true;
      }
      holeAndCutCommand.setPickEntityStatus(isPickEntity);
    },
    getCommandParams(isPreview = true) {
      let idName = 'id';
      if (!isPreview) {
        idName = 'topoId';
      }

      let cutType = this.params.curTab === this.tabOptions[0] ? 0 : 1;
      let lineList = this.params.lineList.map(line => line.id);
      let isTangent = this.params.tangentPropagation ? 1 : 0;
      let distance = this.params.distance;
      let angle = this.params.angle;
      let isReverse = this.params.reverseDirection ? 1 : 0;
      let cutPaths = this.params.cutPath.map(path => path.id);
      let radius = this.params.radius;
      let cutSolids = this.params.cutSolidRef.map(solid => solid.id);

      return {
        cutType,
        lineList,
        isTangent,
        distance,
        angle,
        isReverse,
        cutPaths,
        radius,
        cutSolids,
        isPreview,
      }
    },
    preview() {
      if ((this.params.curTab === this.tabOptions[0] && this.params.lineList.length > 0) ||
              (this.params.curTab === this.tabOptions[1] && this.params.cutPath.length > 0 && this.params.cutSolidRef.length > 0)) {
        let paramData = this.getCommandParams(true);
        if (paramData) {
          holeAndCutCommand.executeFastCutCmd(paramData)
        }
      }
    },
    focus(name) {
      this.originValue = this.params[name].variableValue;
    },
    changeCommon(name) {
      if (name && name !== 'reverseDir') {
        let value = this.params[name].variableValue;
        if (value <= 0) {
          this.params[name].variableValue = this.originValue;
        }
      }
      if (this.params.curTab === this.tabOptions[0]) {//平面切削
        if (this.params.lineList.length > 0){
          let lineIds = this.params.lineList.map(ele => ele.id);
          if (lineIds){
            holeAndCutCommand.highLightElements(lineIds);
          }
        }
      }else {//管状切削
        if (this.params.cutPath.length > 0){
          let cutPaths = this.params.cutPath.map(ele => ele.id);
          if (cutPaths){
            holeAndCutCommand.highLightElements(cutPaths);
          }
        }
        if (this.params.cutSolidRef.length > 0){
          let cutSolids = this.params.cutSolidRef.map(ele => ele.id);
          if (cutSolids) {
            holeAndCutCommand.highLightElements(cutSolids);
          }
        }
      }
      this.preview();
    },
  },

  mounted() {
    holeAndCutCommand.init(500, 250, 500, () => {
      this.init();
      holeAndCutCommand.setSelectType(this.params.filterTypes);
      holeAndCutCommand.handlePickElement((objects) => {
        if (objects.length === 0) return;
        let cutType = this.params.curTab === this.tabOptions[0] ? 0 : 1;
        objects.forEach(object => {
          if (this.params.queryListActiveMap.lineList === 1) {
            let flag = this.params.lineList.some((ele) => object.id === ele.id);
            if (flag) {
              return;
            }
            // this.params.lineList.splice(0);
            this.params.lineList.push(object);
          } else if (this.params.queryListActiveMap.cutPath === 1) {
            let flag = this.params.cutPath.some((ele) => object.id === ele.id);
            if (flag) {
              return;
            }
            this.params.cutPath.push(object);
          } else if (this.params.queryListActiveMap.cutSolidRef === 1) {
            if(object.type === ElementType.DATUMPLANE) return;
            let flag = this.params.cutSolidRef.some((ele) => object.id === ele.id);
            if (flag) {
              return;
            }
            this.params.cutSolidRef.push(object);
          }
        })
      });
    });
  },

  computed: {

  },

  watch: {
    "params.lineList": function (){
      this.changeCommon();
    },
    "params.cutPath": function (){
      this.changeCommon();
    },
    "params.cutSolidRef":function (){
      this.changeCommon();
    },
  },
}
</script>

<style scoped>
.wrap {
  font-size: 12px;
}

label {
  color: var(--text-color1);
}

.content {
  margin-bottom: 7px;
  width: 100%;
  display: flex;
  align-items: center;
}

</style>